<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" style="min-width: 1200px;">
    <el-tab-pane label="RIP" name="first">
      <RIP ref="rip"></RIP>
    </el-tab-pane>
    <el-tab-pane label="OSPF" name="second">
      <OSPF ref="ospf"></OSPF>
    </el-tab-pane>
    <el-tab-pane label="ISIS" name="three">
      <ISIS ref="isis"></ISIS>
    </el-tab-pane>
    <el-tab-pane label="BGP" name="forth">
      <BGP ref="bgp"></BGP>
    </el-tab-pane>
    <el-tab-pane label="OSPFv3" name="fifth">
      <OSPFv3 ref="ospfv3"></OSPFv3>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import RIP from './components/RIP'
import OSPF from './components/OSPF'
import ISIS from './components/ISIS'
import BGP from './components/BGP'
import OSPFv3 from './components/OSPFv3'
export default {
  name: 'Server',
  components: {
    RIP,
    OSPF,
    ISIS,
    BGP,
    OSPFv3
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  mounted () {
    switch (this.activeName) {
      case 'first':
        this.$refs.rip.listData()
        break
      case 'second':
        this.$refs.ospf.listData()
        break
      case 'three':
        this.$refs.isis.listData()
        break
      case 'forth':
        this.$refs.bgp.listData()
        break
      case 'fifth':
        this.$refs.ospfv3.listData()
        break
    }
  },
  methods: {
    handleClick (tab, event) {
      this.activeName = tab.name
      switch (this.activeName) {
        case 'first':
          this.$refs.rip.listData()
          break
        case 'second':
          this.$refs.ospf.listData()
          break
        case 'three':
          this.$refs.isis.listData()
          break
        case 'forth':
          this.$refs.bgp.listData()
          break
        case 'fifth':
          this.$refs.ospfv3.listData()
          break
      }
    }
  }
}
</script>
